<template>
	<view class="u-padding-20">
		<view class="shadow_con">
			<view class="u-border-bottom title u-flex u-row-between">
				<text>收货人信息</text>
				<text style="font-size: 26rpx; color:#0c838b;" v-if="detail.order_status==3">待支付</text>
				<text style="font-size: 26rpx; color:#0c838b;" v-if="detail.order_status==4">待发货</text>
				<text style="font-size: 26rpx; color:#0c838b;" v-if="detail.order_status==5">待收货</text>
				<text style="font-size: 26rpx; color:#0c838b;" v-if="detail.order_status==6">已完成</text>
			</view>
			<view>称呼：{{detail.name}}</view>
			<view>电话：{{detail.tel}}</view>
			<view>地址：{{detail.address}}</view>
		</view>
		<view class="shadow_con u-margin-top-20">
			<view class="u-border-bottom title">商品信息</view>
			<view>
				<view class="shopimg va_m">
					<u-swiper height="150" :list="detail.images"></u-swiper>
				</view>
				<view class="shopinfo va_m">
					<view>{{detail.content}}</view>
					<view class="price">
						<text>￥{{detail.price}}</text>
						<text style="margin-left:30rpx;">{{detail.theme}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="shadow_con u-margin-top-20">
			<view class="u-border-bottom title">
				<text>订单信息</text>
			</view>
			<view class="u-border-bottom u-flex u-row-between" v-if="detail.order_no">
				<text style="color:#666;">订单编号</text>
				<text>{{detail.order_no}}</text>
			</view>
			<view class="u-border-bottom u-flex u-row-between">
				<text style="color:#666;">下单时间</text>
				<text>{{detail.older_create_time}}</text>
			</view>
			<view class="u-border-bottom u-flex u-row-between" v-if="detail.payment_amount">
				<text style="color:#666;">支付金额</text>
				<text>{{detail.payment_amount}}</text>
			</view>
			<view class="u-border-bottom u-flex u-row-between" v-if="detail.payment_remark">
				<text style="color:#666;">支付备注</text>
				<text>{{detail.payment_remark}}</text>
			</view>
			<view class="u-border-bottom u-flex u-row-between" v-if="detail.payment_time">
				<text style="color:#666;">支付时间</text>
				<text>{{detail.payment_time}}</text>
			</view>
			<view class="u-border-bottom u-flex u-row-between" v-if="detail.payment_trade">
				<text style="color:#666;">支付单号</text>
				<text>{{detail.payment_trade}}</text>
			</view>
			<view class="u-border-bottom u-flex u-row-between">
				<text style="color:#666;">配送方式</text>
				<text>物业配送</text>
			</view>
		</view>
		<button type="default" class="btn_con" v-if="detail.order_status==3">等待支付</button>
		<button type="default" class="btn_con" v-if="detail.order_status==4" @click="tosend(detail.id)">确认发货</button>
		<button type="default" class="btn_con" v-if="detail.order_status==5" @click="tocomplete(detail.id)">标记完成</button>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		getLatticeOrderDetail,
		latticeSend,
		latticeComplete
	} from "@/service/shareService.js";
	export default {
		data () {
			return {
				id:0,
				list:[
					'https://admin.gslhzhwy.com/upload/69/0e23b6a181143f1c16d0f6ab228fd5.jpg',
				'https://marketplace.canva.cn/MACV4jv20pw/1/screen/canva-%E8%92%B2%E5%85%AC%E8%8B%B1-MACV4jv20pw.jpg'
				],
				detail:{}
			}
		},
		onLoad(options) {
			this.id=options.id
			getLatticeOrderDetail({
				id:options.id
			}).then(this.getLatticeOrderDetail);
			
			// this.detail=JSON.parse(decodeURIComponent(options.item));
		},
		methods:{
			getLatticeOrderDetail(e){
				if(e.code==200){
					this.detail=e.result
				}
			},
			
			tosend:function(id){
				uni.showModal({
					title:'确认发货该商品？',
					// content: "确认下架该商品？",
					cancelText: "考虑一下", // 取消按钮的文字  
					confirmText: "确认发货", // 确认按钮文字  
					confirmColor: '#00aa00',
					cancelColor: '#2b2b2b',
					success: (res) => {
						if (res.confirm) {
							latticeSend({
								id:id
							}).then(res=>{
								if(res.code==200){
									this.$refs.uToast.show({
										type: 'success',
										title: res.msg,
										icon:false
										// message: e.msg,
									})
									setTimeout(function(){
										uni.navigateBack();
									},1000)
								}else{
									this.$refs.uToast.show({
										type: 'error',
										title: res.msg,
										icon:false
										// message: e.msg,
									})
								}
							});
						} else if (res.cancel) {
							
						}
					},
				});
			},
			tocomplete:function(id){
				uni.showModal({
					title:'确认用户收到该商品？',
					// content: "确认下架该商品？",
					cancelText: "考虑一下", // 取消按钮的文字  
					confirmText: "确认收货", // 确认按钮文字  
					confirmColor: '#00aa00',
					cancelColor: '#2b2b2b',
					success: (res) => {
						if (res.confirm) {
							latticeComplete({
								id:id
							}).then(res=>{
								if(res.code==200){
									this.$refs.uToast.show({
										type: 'success',
										title: res.msg,
										icon:false
										// message: e.msg,
									})
									setTimeout(function(){
										uni.navigateBack();
									},1000)
								}else{
									this.$refs.uToast.show({
										type: 'error',
										title: res.msg,
										icon:false
										// message: e.msg,
									})
								}
							});
						} else if (res.cancel) {
							
						}
					},
				});
			}
		}
	}
</script>

<style lang="scss">
	.shadow_con{
		padding:20rpx;
		border-radius: 20rpx;
		box-shadow: 0 0 15rpx #ddd;
	}
	.title{
		font-size: 32rpx;
		font-weight: bold;
	}
	.shadow_con>view{
		padding:15rpx 0;
	}
	.shopimg{
		display: inline-block;
		width:27%;
	}
	.shopinfo{
		display: inline-block;
		width:73%;
		padding:15rpx;
	}
	.price{
		margin-top:20rpx;
		font-size: 28rpx;
		color:#666;
	}
	.btn_con{
		width:90%;
		height:70rpx;
		line-height: 70rpx;
		font-size: 30rpx;
		border-radius: 35rpx;
		overflow: hidden;
		margin:70rpx auto 20rpx;
		background-image: url('https://resourse.cnlhjt.com/upload/20220825/d1aa35c1d129137d9b12c8f34e59c5bc.png');
		background-size: 100% 70rpx;
		color:#fff !important;
	}
</style>
